<template>
  <div class="border-div">
    <div
      class="head-text"
      :class="{ 'text-selected': valueSelected == 0 }"
      @click="selectValue(0)"
    >
      关注
    </div>
    <div
      class="head-text"
      :class="{ 'text-selected': valueSelected == 1 }"
      @click="selectValue(1)"
    >
      精选
    </div>
    <div
      class="head-text"
      :class="{ 'text-selected': valueSelected == 2 }"
      @click="selectValue(2)"
    >
      我的
    </div>
  </div>
</template>

<script>
export default {
  name: "LeftHead",
  data() {
    return {
      valueSelected: 0,
    };
  },
  methods: {
    selectValue(index) {
      this.valueSelected = index;
      console.log(this.valueSelected);
      this.$emit("tellFather", this.valueSelected);
    },
  },
};
</script>

<style scoped>
.border-div {
  height: 45px;
  background-color: #fff;
  box-shadow: 2px 2px 10px 2px #ddd;
  margin-bottom: 10px;
  display: flex;
}
.head-text {
  padding: 13px 0;
  margin: 0 20px;
  font-size: 14px;
}
.head-text:hover {
  color: #216fa8;
}
.text-selected {
  color: #449bda;
}
</style>
